﻿@{
    Layout = null;
}
<!DOCTYPE html> 
<html>
    <head>
        <title>依依钻石首页</title>
        <meta charset="utf-8">
        <meta name="keywords" content="钻石" /> 
        <meta name="description" content="" />  
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <link rel="stylesheet" href="~/css/common.css" />
        <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
        <script src="~/Js/jquery.min.js"></script>
        <script src="~/Js/swipe.js"></script>
        <style>
            .swipe {
                overflow: hidden;
                visibility: hidden;
                position: relative;
            }

            .swipe-wrap {
                overflow: hidden;
                position: relative;
            }

                .swipe-wrap img {
                    width: 100%; /*让我们的图片宽度是100%*/
                    height: auto;
                }

                .swipe-wrap > figure {
                    float: left;
                    width: 100%;
                    position: relative;
                }

            #circle {
                position: absolute;
                height: 5px;
                bottom: 10px;
                width: 60px;
                margin:0 auto;
            }

                #circle li {
                    width: 8px;
                    background-color: #d3d3d3;
                    float: left;
                    height: 8px;
                    border-radius:8px;
                }
                    #circle li.current {
                        background-color: #f60;
                    }
        </style>
    </head>
    <body>
        <section>
            <header>
                <h2>首页</h2>
                <a href="/customer/index">登录</a>
            </header>
            <div class="banner">
       <div id="slider" class="swipe">
        <div class="swipe-wrap">
          <figure>
            <div class="wrap">
               <img src="~/Images/b1.jpg">
            </div>
          </figure>
          <figure>
            <div class="wrap">
               <img src="~/Images/b2.jpg">
            </div>
          </figure>
          <figure>
            <div class="wrap">
               <img src="~/Images/b3.jpg">
            </div>
          </figure>
        </div>
        <ol id="circle">
            <li class="current"></li>
            <li></li>
            <li></li>
           
        </ol>
            </div>
               
                   </div>
        </section>
    </body>
</html>
 <script type="text/javascript">
   var slider =Swipe(document.getElementById('slider'), { // 最大盒子的id
         auto: 3000,// 3秒 自动切换
         continuous: true,
         callback: function (pos) {  // 返回值  pos 是返回当前的索引值
                for (var i = 0; i <= circle.length - 1; i++)// 遍历数组
                   {
                      circle[i].className = "";  //  其余的所有li 清除 current类
                      circle[pos].className = "current";// 只留下当前的这个li添加current
                    }
        }
   });
  var circle = document.getElementById('circle').getElementsByTagName('li');//获取li 的数组
   </script>